<template>
  <div class="tooltip_box">
    <RlTooltip placement="top-start">
      <h1>top-start</h1>
      <template #content>
        <p>Hello Tooltip</p>
      </template>
    </RlTooltip>
    <RlTooltip placement="top">
      <h1>top</h1>
      <template #content>
        <p>Hello Tooltip</p>
      </template>
    </RlTooltip>
    <RlTooltip placement="top-end">
      <h1>top-end</h1>
      <template #content>
        <p>Hello Tooltip</p>
      </template>
    </RlTooltip>
  </div>
  <div class="tooltip_box">
    <RlTooltip placement="bottom-start">
      <h1>bottom-start</h1>
      <template #content>
        <p>Hello Tooltip</p>
      </template>
    </RlTooltip>
  </div>
  <div class="tooltip_box">
    <RlTooltip placement="left-start">
      <h1>left-start</h1>
      <template #content>
        <p>Hello Tooltip</p>
      </template>
    </RlTooltip>
  </div>
  <div class="tooltip_box">
    <RlTooltip placement="right-start">
      <h1>right-start</h1>
      <template #content>
        <p>Hello Tooltip</p>
      </template>
    </RlTooltip>
  </div>
    
 
</template>

<script setup lang="ts">
import RlTooltip from '@/components/Tooltip/Tooltip.vue'
defineOptions({
  name:'TooltipView'
})
</script>

<style scoped>
.tooltip_box{
  margin: 50px 200px;
}
</style>